﻿<div class="row page-header">
    <div class="col-sm-10">
        <div class="client-logo" ng-show="model.clientLogoUrl"><img ng-src="{{model.clientLogoUrl}}"></div>
        <h1>
            {{model.clientName}}
            <small>is requesting your permission</small>
        </h1>
    </div>
</div>

<div class="row">
    <div class="col-sm-8">
        <div ng-show="model.errorMessage" class="alert alert-danger">
            <strong>Error:</strong>
            {{model.errorMessage}}
        </div>
        <form name="form" method="post" action="{{model.consentUrl}}" class="consent-form">
            <anti-forgery-token token="model.antiForgery"></anti-forgery-token>

            <div>Uncheck the permissions you do not wish to grant.</div>

            <div class="panel panel-default consent-buttons" ng-show="model.identityScopes.length">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-user"></span>
                    Personal Information
                </div>
                <ul class="list-group">
                    <li ng-repeat="scope in model.identityScopes" class="list-group-item">
                        <label>
                            <input class="consent-scopecheck" type="checkbox" name="scopes" id="scopes_{{scope.name}}" value="{{scope.name}}" ng-model="scope.selected" ng-disabled="scope.required" />
                            <strong>{{scope.displayName}}</strong>
                            <span ng-show="scope.emphasize" class="glyphicon glyphicon-exclamation-sign"></span>
                        </label>
                        <span ng-show="scope.required"><em>(required)</em></span>
                        <div class="consent-description" ng-show="scope.description">
                            <label for="scopes_{{scope.name}}">{{scope.description}}</label>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="panel panel-default" ng-show="model.resourceScopes.length">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-tasks"></span>
                    Application Access
                </div>
                <ul class="list-group">
                    <li ng-repeat="scope in model.resourceScopes" class="list-group-item">
                        <label>
                            <input class="consent-scopecheck" type="checkbox" name="scopes" value="{{scope.name}}" ng-model="scope.selected" ng-disabled="scope.required" />
                            <strong>{{scope.displayName}}</strong>
                            <span ng-show="scope.emphasize" class="glyphicon glyphicon-exclamation-sign"></span>
                        </label>
                        <span ng-show="scope.required"><em>(required)</em></span>
                        <div class="consent-description" ng-show="scope.description">
                            <span ng-show="scope.required"><em>(required)</em></span>
                            <label for="scopes_{{scope.name}}">{{scope.description}}</label>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="consent-remember" ng-show="model.allowRememberConsent">
                <label>
                    <input class="consent-scopecheck" type="checkbox" name="RememberConsent" value="true" ng-model="model.rememberConsent" />
                    <strong>Remember My Decision</strong>
                </label>
            </div>

            <div class="consent-buttons">
                <button name="button" value="yes" class="btn btn-primary" autofocus>Yes, Allow</button>
                <button name="button" value="no" class="btn">No, Do Not Allow</button>
                <a class="pull-right btn btn-default" target="_blank" ng-show="model.clientUrl" ng-href="{{model.clientUrl}}">
                    <span class="glyphicon glyphicon-info-sign"></span>
                    <strong>{{model.clientName}}</strong>
                </a>
            </div>
        </form>
    </div>
</div>
